<template>
    <div class="timeList-wrapper">
        <div v-if="!item.children||item.children.length==0" class="data-item" :class="'level'+itemLevel"  @click="itemClick(item)">
            <span>{{item.name}}</span>
        </div>
        <div v-else-if="item.children.length>0" class="data-item-folder" :class="'level'+itemLevel">
            <img src="@/assets//multiTime/文件夹.png" class="imgSize2" />
            <span>{{item.name}}</span>
        </div>
        <div class="data-item-child-panel" v-if="item.children&&item.children.length>0">
        <template v-for="(item2, index2) in item.children">
            <div v-if="!item2.children||item2.children.length==0" class="data-item" :class="'level'+(itemLevel+1)" @click="itemClick(item2)">
                <span>{{item2.name}}</span>
            </div>
            <div v-else-if="item2.children.length>0" class="data-item-folder" :class="'level'+(itemLevel+1)">
                <img src="@/assets//multiTime/文件夹.png" class="imgSize2" />
                <span>{{item2.name}}</span>
            </div>
            <div class="data-item-child-panel" v-if="item2.children&&item2.children.length>0">
            <TimeListItem  v-for="(item3, index3) in item2.children" :key="item3.key" :item="item3"  :itemLevel="itemLevel+2" @item-click="itemClick"></TimeListItem>
            </div>
        </template>
        </div>
    </div>
  </template>
  
  <script setup>

  import { ref, onMounted, computed, onBeforeUnmount, watch,defineProps,defineEmits  } from "vue";
  import TimeListItem from "./timeListItem.vue";

  const emitItemClick = defineEmits(['item-click']);
  const timeListData = ref(null);
//   const Shouqi = ref(false);
//   const headerShowSatatus = computed(() => headerStore.headerShowSatatus);

  const props = defineProps({
       /**数据条目*/
       item: {
        type: Object,
        default: ()=>{}
      },
      /**数据条目层级*/
      itemLevel: {
        type: Number,
        default: 1
      },
  })
  
  onMounted(() => {

  });

  //调用传递过来的父组件方法
  const itemClick=(data)=>{        
        emitItemClick('item-click', data);
   }
  
  </script>
  
  <style lang="scss" scoped>
  .data-item-folder {
    display: block;
    align-items: center;
    width: 100%;
    line-height: 30px;
    height: 36px;
    // background-color: #333949;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
        span{
            padding: 6px;
        }
    }
    .imgSize2{
        width: 24px;
        height: 24px;
        margin-top: 4px;
        float: left;
    }
    .data-item {
    display: block;
    align-items: center;
    line-height: 30px;
    width: 100%;
    height: 36px;
    // background-color: #333949;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
    span {
        padding: 6px;
    }
    }
    .data-item-child-panel{
    width: 100%;
    .data-item {
        line-height: 30px;
        width: 100%;
        cursor: pointer;
    &:hover{
        width: 354px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;
        border-image: linear-gradient(to right, #171CFF, #38FFCE) 1;
        color: #38FFCE;
        // background: #777f911a;
        /*box-shadow: inset 0 0 2px 1px #ffffff66;*/
    }
    }
    }

    .level1{
        padding-left: 30px !important;
    }
    .level2{
        padding-left: 60px !important;
    }
    .level3{
        padding-left: 90px !important;
    }
    .level4{
        padding-left: 120px !important;
    }
    .level5{
        padding-left: 150px !important;
    }
    .level6{
        padding-left: 180px !important;
    }
    .level7{
        padding-left: 210px !important;
    }
    .level8{
        padding-left: 240px !important;
    }
    .level9{
        padding-left: 270px !important;
    }
  </style>
  